<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title></title>
    <meta content="" name="keywords">
    <meta content="" name="description">
    <link rel="stylesheet" href="css/2.css">
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.6.2/echarts.common.js"></script>
    <script type="text/javascript">
        !function () {
            var htmlEl = document.getElementsByTagName('html')[0];
            var fitPage = function () {
                /* The calculate of with from zepto  */
                var w = htmlEl.getBoundingClientRect().width;
                w = Math.round(w);
                w = w > 750 ? 750 : w;
                var newW = w / 750 * 100;
                htmlEl.style.fontSize = newW + 'px';
            }
            fitPage();
            var t;
            var func = function () {
                clearTimeout(t);
                t = setTimeout(fitPage, 25);
            }
            window.addEventListener('resize', func);
        }();
    </script>
</head>
<body>
<header class="dc-header dc-header-fixed">
    <div class="dc-header-box" style="background: url('images/dc-2-1.png');background-size: cover">
        <div class="dc-2-header-title">
            每日能量摄入推荐
        </div>
        <div class="dc-2-header-one-ring-box-content">
            <div class="title">1800</div>
            <div class="sub-title">kcal</div>
        </div>
        <div style="padding-top: 0.5rem;">
            <div class="dc-2-header-two-ring-box-content">
                <div class="desc">早餐</div>
                <div class="title">600</div>
                <div class="sub-title">kcal</div>
            </div>
            <div class="dc-2-header-two-ring-box-content">
                <div class="desc">午餐</div>
                <div class="title">600</div>
                <div class="sub-title">kcal</div>
            </div>
            <div class="dc-2-header-two-ring-box-content">
                <div class="desc">晚餐</div>
                <div class="title">600</div>
                <div class="sub-title">kcal</div>
            </div>
        </div>
        <div>
            在订餐时,看到进度条接近彼岸时,能量已经足够,切勿贪嘴
            <div class="gradient-box">
                <div class="gradient">

                </div>
            </div>
        </div>
    </div>
</header>
<section class="dc-content">
    <div class="dc-2-content">
        <div class="dc-2-content-title">
            三大能量来源比推荐
        </div>
        <hr class="dc-2-box-line"/>
        <div class="desc-left" id="main" style="width: 60%;height: 4rem;">
        </div>
        <div class="desc-right">
            <div class="desc-detail">
                <div class="desc-title-icon" style="background: #98E3F5;"></div>
                <span>碳水化合物</span>
            </div>
            <div class="desc-detail">
                <div class="desc-title-icon" style="background: #FEE187;"></div>
                <span>脂肪</span>
            </div>
            <div class="desc-detail">
                <div class="desc-title-icon" style="background: #F9837F;"></div>
                <span>蛋白质</span>
            </div>
        </div>
    </div>
    <div class="dc-2-bottom-btn">
        确定
    </div>
</section>
<script>
    var option = {
        series : [
            {
                type: 'pie',
                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                color:['#98E3F5', '#FEE187', '#F9837F'],
                data:[
                    {value:20, name:'20%'},
                    {value:30, name:'30%'},
                    {value:50, name:'50%'},

                ]
            }
        ]
    };
    echarts.init(document.getElementById('main')).setOption(option);
</script>
</body>
</html>